<!-- 文字轮播组件 -->
<template>
    <div class="scroll-content" :id="[contentId]" @mouseleave="onMouseleave" @mouseenter="onMouseenter">
        <div class="scroll-box" :id="[scrollId]" :class="isAnimate ? '' : 'no-animate'" :style="{
            transform: `translateY(${scrollTop}px)`
        }">{{ content }}</div>
    </div>
</template>

<script>
export default {
    props: {
        content: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            scrollTop: 0,
            isAnimate: true,
            outTop: null,
            innerDom: null,
            timeId: null,
            contentId: 'scroll-content_' + new Date().getTime(),
            scrollId: 'scroll-box_' + new Date().getTime(),
            contentDom: null,
            scrollDom: null
        }
    },
    mounted() {
        this.initData()
        window.removeEventListener('resize', () => {
           this.onReset()
        });
    },
    methods: {
        initData() {
            this.contentDom = document.querySelector('#' + this.contentId)
            this.scrollDom = document.querySelector('#' + this.scrollId)
            this.outTop = this.contentDom.getBoundingClientRect().top
            this.innerDom = this.scrollDom
            if(this.scrollDom.getBoundingClientRect().height > this.contentDom.getBoundingClientRect().height) {
                this.startScroll()
            }
        },
        onReset() {
            if(this.scrollDom.getBoundingClientRect().height > this.contentDom.getBoundingClientRect().height) {
                this.startScroll()
            }else {
                clearInterval(this.timeId)
                this.scrollTop = 0
            }
        },
        startScroll() {
            clearInterval(this.timeId)
            this.timeId = setInterval(() => {
                this.scrollTop -= 1
                if (this.outTop > this.innerDom.getBoundingClientRect().bottom) {
                    this.isAnimate = false
                    this.$nextTick(() => {
                        this.scrollTop = 0
                    })
                    setTimeout(() => {
                        this.isAnimate = true
                    }, 300)
                }
            }, 120)
        },
        onMouseleave() {
            if(this.scrollDom.getBoundingClientRect().height > this.contentDom.getBoundingClientRect().height) {
                this.startScroll()
            }
        },
        onMouseenter() {
            clearInterval(this.timeId)
        }
    }
}
</script>

<style lang="scss" scoped>
.scroll-content {
    width: 100%;
    height: 100%;
}
.scroll-box {
    transition: transform .3s;
    transform: translateY(0);
    font-size: 12px;
    line-height: 1.8;
    cursor: pointer;
}

.no-animate {
    transition: none;
}
@media screen and (max-width: 1600px){
    .scroll-box {
        font-size: 10px;
    }
}
@media screen and (min-width: 1921px) and (max-width: 2560px) {
    .scroll-box {
        font-size: 20px;
    }
}
@media screen and (min-width: 2561px){
    .scroll-box {
        font-size: 30px;
    }
}
</style>